<!--
 * @Author: Baishui
 * @Date: 2021-10-03 14:38:25
 * @LastEditors: Baishui
 * @LastEditTime: 2021-10-03 16:13:25
 * @Description: file content
-->
<template>
  <div class="tree-box">
    <a-card class="margin20" title="基础树">
      <BasicTree />
    </a-card>
    <a-card class="margin20" title="自定义树">
      <CustomTree />
    </a-card>
    <a-card class="margin20" title="伸缩输">
      <ZoomTree />
    </a-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue'
  import BasicTree from './basicTree.vue'
  import CustomTree from './customTree.vue'
  import ZoomTree from './zoomTree.vue'

  export default defineComponent({
    name: 'D3Tree',
    components: {
      BasicTree,
      CustomTree,
      ZoomTree,
    },
    setup() {
      const state = reactive({})
      return {
        ...toRefs(state),
      }
    },
  })
</script>
<style lang="less" scoped>
  .margin20 {
    margin-bottom: 20px;
  }
</style>
